<template>
	<a-modal
		:visible="visible"
		width="800px"
		title="主体信息"
		class="subject-info"
		centered
		destroyOnClose
		:maskClosable="false"
		@cancel="cancel">
		<div class="tip-info" v-if="visibles.info.rejectionReason">
			<svg-icon icon-class="Warning-Circle-Fill" />
			{{ visibles.info.rejectionReason }}
		</div>
		<a-descriptions size="small">
			<a-descriptions-item label="主体状态">
				<span>
					{{ visibles.info.status ? invoicingSubjectState[visibles.info.status].name : '' }}
				</span>
			</a-descriptions-item>
		</a-descriptions>
		<a-descriptions size="small" :column="2">
			<a-descriptions-item label="企业名称">{{ visibles.info.name }}</a-descriptions-item>
			<a-descriptions-item label="税号">{{ visibles.info.taxpayerNum }}</a-descriptions-item>
			<a-descriptions-item v-if="isShow()" label="法人名称">{{ visibles.info.legalPersonName }}</a-descriptions-item>
			<a-descriptions-item v-if="isShow()" label="联系人名称">{{ visibles.info.contactsName }}</a-descriptions-item>
			<a-descriptions-item v-if="isShow()" label="联系人邮箱">{{ visibles.info.contactsEmail }}</a-descriptions-item>
			<a-descriptions-item v-if="isShow()" label="联系人手机">{{ visibles.info.contactsPhone }}</a-descriptions-item>
			<a-descriptions-item v-if="isShow()" label="市（地区）名称">{{ visibles.info.cityName }}</a-descriptions-item>
			<a-descriptions-item v-if="isShow()" label="地区编码">{{ visibles.info.regionCode }}</a-descriptions-item>
			<a-descriptions-item v-if="isShow()" label="详细地址">{{ visibles.info.enterpriseAddress }}</a-descriptions-item>
			<a-descriptions-item label="企业税控设备类型">
				{{
					(visibles.info.taxControlDeviceTypes || [])
						.map(taxControlDeviceType => equipmentType[taxControlDeviceType]?.name)
						.join('、') || '暂无信息'
				}}
			</a-descriptions-item>
			<a-descriptions-item v-if="isShow()" label="营业执照图片">
				<!-- <div class="download-code-box"> -->
				<div class="file-upload-container custom" v-if="imgUrl">
					<div class="file-preview">
						<a-image style="object-fit: contain" :src="imgUrl" />
					</div>
				</div>
				<!-- </div> -->
			</a-descriptions-item>
		</a-descriptions>

		<a-descriptions v-if="show() && visibles.info.sourceType === 2" size="small" :column="1">
			<a-descriptions-item label="金税盘/税控盘/税务 UKEY配置">
				<a-descriptions size="small" colon bordered :column="3" class="discount-descriptions">
					<template v-for="(discount, index) in visibles.info?.machineInfos || []" :key="index">
						<a-descriptions-item class="discount-box" label="税盘号">
							{{ discount?.machineCode }}
						</a-descriptions-item>
						<a-descriptions-item class="discount-box" label="终端号">{{ discount?.extensionNum }}</a-descriptions-item>
						<a-descriptions-item class="discount-box" label="单张开票限额">{{ discount?.invoiceMaxValue }}</a-descriptions-item>
					</template>
				</a-descriptions>
			</a-descriptions-item>
		</a-descriptions>
		<template #footer>
			<a-button @click="cancel">关闭</a-button>
			<a-button
				type="primary"
				v-if="visibles.info.status === 2 && hasPermissions(['mk_finance_invoicing_subject_cxtj'])"
				:loading="loading"
				:disabled="disabled"
				@click="submit">
				重新提交
			</a-button>
			<a-button
				:loading="loading"
				v-if="visibles.info.status === 4 && hasPermissions(['mk_finance_invoicing_subject_bj'])"
				:disabled="disabled"
				@click="handle('update')">
				编辑
			</a-button>
			<a-button
				type="primary"
				v-if="visibles.info.status === 4 && hasPermissions(['mk_finance_invoicing_subject_qy'])"
				:loading="loading"
				:disabled="disabled"
				@click="handle('enable')">
				启用
			</a-button>
			<a-button
				type="primary"
				v-if="visibles.info.status === 3 && hasPermissions(['mk_finance_invoicing_subject_jy'])"
				:loading="loading"
				:disabled="disabled"
				@click="handle('disabled')">
				禁用
			</a-button>
		</template>
	</a-modal>
	<!-- @success="getList" -->
	<!-- 编辑 -->
	<add-invoicing-entity v-model:visible="visibles.addReserveVisible" :detail="visibles.info" @success="getOrgInfoById" />
	<secondary-confirmation v-model:visible="visibles.certification" :data="modalConfirmData" @success="getOrgInfoById" />
</template>
<script setup lang="ts">
	import {reactive, ref, watch} from 'vue'
	import {message} from 'ant-design-vue'
	import {orgInfoUpdateDisableStatus, orgInfoId, getImgById} from '@/api/invoice-administration'
	import {invoicingSubjectState, equipmentType} from '@/utils/invoice-administration'
	import AddInvoicingEntity from '@/components/finance/invoice-administration/add-invoicing-entity/add-invoicing-entity.vue'
	import SecondaryConfirmation from '@/components/finance/invoice-administration/secondary-confirmation/secondary-confirmation.vue'

	import {useStore} from '@/store/index'

	const hasPermissions = useStore().hasPermissions
	const props = defineProps({
		detail: {
			type: Object,
			required: true
		},
		visible: {
			type: Boolean,
			required: true
		}
	})
	const visibles = reactive<any>({
		certification: false,
		addReserveVisible: false,
		info: {}
	})
	const imgUrl = ref<string>('')
	//弹框提示
	const modalConfirmData = reactive<any>({
		title: '',
		content: '',
		requestMethodFun: null,
		seveDate: {}
	})
	const loading = ref<boolean>(false)
	const disabled = ref(false)
	const emit = defineEmits(['update:visible', 'close'])
	const cancel = () => {
		emit('close')
		emit('update:visible', false)
	}
	const submit = () => {}
	//查详情
	const getOrgInfoById = () => {
		orgInfoId(props.detail.id).then(ref => {
			visibles.info = ref.data
		})
	}
	const imgById = () => {
		getImgById(props.detail.id).then(res => {
			imgUrl.value = res.data[0]?.url || ''
		})
	}
	//操作
	const handle = (field: string) => {
		switch (field) {
			case 'disabled':
				//禁用
				visibles.certification = true
				modalConfirmData.title = '禁用'
				modalConfirmData.content = '禁用之后将无法使用该开票主体进行开票、冲红，确定要禁用该企业信息吗？'
				modalConfirmData.requestMethodFun = orgInfoUpdateDisableStatus
				modalConfirmData.seveDate = {
					id: props.detail.id,
					disabled: true
				}
				console.log('禁用')
				break
			case 'enable':
				//启用、
				visibles.certification = true
				modalConfirmData.title = '启用'
				modalConfirmData.content = '启用之后将可以使用该开票主体进行开票、冲红，确定要启用该企业信息吗？'
				modalConfirmData.requestMethodFun = orgInfoUpdateDisableStatus
				modalConfirmData.seveDate = {
					id: props.detail.id,
					disabled: false
				}
				console.log('启用')
				break
			case 'update':
				//编辑
				visibles.addReserveVisible = true
				console.log('编辑')
				break
		}
	}
	watch(
		() => props.visible,
		(newVal, oldVal) => {
			if (newVal) {
				getOrgInfoById()
				imgById()
			}
		}
	)

	// 是否在票通平台注册过企业
	const isShow = () => {
		if (visibles.info.sourceType === 1) {
			return true
		}
		return false
	}

	// 是否展示
	const show = () => {
		if (visibles.info.taxControlDeviceTypes?.includes('1') || visibles.info.taxControlDeviceTypes?.includes('2')) {
			return true
		}
		return false
	}
</script>
<style lang="less">
	.subject-info {
		.url-input {
			position: absolute;
			width: 125px;
			height: 128px;
			z-index: -1;
			top: 0;
			left: 0;
		}
		.text {
			font-size: 12px;
			color: #999;
		}
		.ant-form-vertical .display-flex {
			flex-direction: initial;
			.ant-form-item-control-input-content {
				margin: -8px 0 0 10px;
			}
		}
		.tip-info {
			width: 100%;
			height: 40px;
			line-height: 40px;
			background: #fffbe6;
			border-radius: 2px 2px 2px 2px;
			opacity: 1;
			border: 1px solid #ffe58f;
			font-size: 14px;
			margin-bottom: 20px;
			padding-left: 16px;
		}
		.file-upload-container {
			width: 133px;
			// height: 133px;
		}
		.download-code-box {
			width: 140px;
			margin: 35px auto 0;
		}
		.download-code-text {
			text-align: center;
			display: block;
			margin-top: 15px;
		}

		.discount-descriptions {
			:deep .ant-descriptions-row {
				th,
				td {
					font-size: 12px;
					padding: 4px 8px;
				}
			}
			.discount-box {
				font-size: 12px;
				padding: 4px 16px;
			}
		}

		.footerHide {
			.ant-modal-footer {
				display: none;
			}
		}
	}
</style>
